<template>
  <div>
    <el-dialog
      class="tiannet-show-custom tiannet-show-custom-nopadding"
      v-model="state.isVisible"
      center
      draggable
      :modal="false"
      :width="scale(465)"
      :title="t('test.popExample')"
      @closed="handleClosed"
    >
      <div class="popup-example">
        <span>{{t('test.popupContent')}}</span>
      </div>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive } from 'vue';
import { useRoute } from 'vue-router';
import { useLocale } from '@/locales/use-locale';
import { scale } from '@sutpc/config';

const emits = defineEmits(['closed']);

const route = useRoute();
const { t } = useLocale();

const state = reactive({
  isVisible: false
});

const open = () => {
  state.isVisible = true;
};

const close = () => {
  state.isVisible = false;
};

const handleClosed = () => {
  emits('closed');
};

onMounted(async () => {});

defineExpose({
  open,
  close
});
</script>
<style lang="less" scoped>
.popup-example{
  height: 200px;
  font-size: 30px;
  padding: 20px;
}
</style>
